<template>
    <div class="vote_main">
        <!-- <header> -->
        <!-- <div class="demo-date-picker">
                <div class="block">
                    <span class="demonstration">发布日期:</span>
                    <el-date-picker v-model="value1" type="monthrange" range-separator="-" start-placeholder="2022-10-10"
                        end-placeholder="2023-10-10" />
                </div>
            </div>
            <p>
                状态：
                <el-select v-model="select" class="m-2" placeholder="请选择" style="height: 30px;">
                    <el-option label="item.label" :value="1" />
                </el-select>
            </p>

            <p> 快速搜索：&nbsp;<el-input v-model="search" class="w-50 m-2" size="small" style="width: 150px; height: 30px;"
                    placeholder="请输入发布者或标题" /></p>
            <p>
                <el-button type="primary">查询</el-button>
                <el-button>重置</el-button>
            </p> -->
        <!-- </header> -->
        <div class="vote_couent">
            <el-table :data="tableData" style="width: 100% ">
                <el-table-column prop="index" label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" width="180">
                    <!-- <template #default="scope">
                       
                    </template> -->
                </el-table-column>
                <el-table-column prop="school" label="地址" width="120">
                    <template #default="scope">
                        {{ scope.row.school.areaDetail }}
                    </template>
                </el-table-column>
                <el-table-column prop="school" label="发布范围">
                    <template #default="scope">
                        {{ scope.row.school.area }}
                    </template>
                </el-table-column>
                <el-table-column prop="obj" label="参与对象">
                    <template #default="scope">
                        {{ scope.row.school.sType }}
                    </template>
                </el-table-column>
                <el-table-column prop="school" label="发布者">
                    <template #default="scope">
                        {{ scope.row.school.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="detail " label="发内容">
                    <template #default="scope">
                        {{ scope.row.detail }}
                    </template>

                </el-table-column>
                <el-table-column prop="id" label="操作">
                    <template #default="scope">
                        <span style="color: crimson;" @click="deletes(scope.row)">删除</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="demo-pagination-block" style="float: right;">
            <el-pagination :total="10" v-model:page-size="pageSize4" :page-sizes="[5, 7, 9, 12]" :small="small"
                :disabled="disabled" :background="background" layout="prev, pager, next, total, jumper, sizes"
                next-text="下一页" prev-text="上一页" v-model:current-page="currentPage4" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts" >
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import server from '@/api';
const form = ref({})
const value1 = ref([])
var search = ref()
var select = ref()
var tableData: any = ref()
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
}
onMounted(async () => {
    var res = await server.Homeschool.allActive()
    tableData.value = res.data.data
    // console.log(res.data.data);
})
const deletes = async (row: any) => {
    var res = await server.Homeschool.deleteActive(row.id)
    if (res.data.code == 200) {
        ElNotification.success({ message: '删除成功' })
        var i = tableData.value.findIndex((item: any) => item.id == row.id)
        tableData.value.splice(i, 1)
    }
}
</script>

<style scoped lang="scss">
.vote_main {
    header {
        width: 98%;
        margin: auto;
        background-color: #fff;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 20px;
    }

    .vote_couent {
        width: 98%;
        background-color: #fff;
        margin: auto;
        padding-left: 30px;
        display: flex;
        align-items: center;
        font-size: 12px;

    }
}
</style>